<template>
  <div class="author-index">
    <div class="first-floor">
      <div class="son">
        <div
          @click="changeAuthorNameText('change')"
          v-if="!changeTextVisible"
          class="changeText"
        >
          修改
        </div>
        <div
          v-if="changeTextVisible"
          class="changeText"
        >
          <span @click="changeAuthorNameText('no')" style="color: red">取消</span>
          <span @click="changeAuthorNameText('yes')" style="color: #1890ff; margin-left: 12px">确定</span>
        </div>
        <a-avatar :size="66" :src="authorInfo.avatar" />
        <div v-if="changeTextVisible" style="width: 50%">
          <a-input
            class="title"
            v-model="authorInfo.chineseName"
            size="large"
            placeholder="large size"
          />
        </div>
        <span v-if="!changeTextVisible" class="title">{{
          authorInfo.chineseName
        }}</span>
      </div>
      <div class="son">
        <span class="title">作品集</span>
        <span class="value">{{ sampleSum }}</span>
      </div>
      <div class="son">
        <span class="title">收录作品</span>
        <span class="value">{{ imageSum }}</span>
      </div>
    </div>
    <div class="second-floor">
      <div class="title" style="font-size: 18px; margin-bottom: 20px">
        作品集
      </div>
      <div class="sample-box">
        <div v-for="(item, index) in sampleList" :key="index">
          <div @click="showSample(index)" class="img-box">
            <img :src="item.cover" alt="" />
          </div>
          <div v-if="item.show" class="sample-more">
            <h3>{{ item.title }}</h3>
            <h4>作者：{{ item.author }}</h4>
            <p style="width: 100%">{{ item.content }}</p>
            <a-spin :spinning="sampleActive.length == 0" tip="加载中...">
              <div class="sample-more-img-box">
                <div v-for="item1 in sampleActive" :key="item1" class="img-box">
                  <img :src="item1.url" alt="" />
                </div>
              </div>
            </a-spin>
          </div>
        </div>
      </div>
    </div>
    <div class="second-floor">
      <div class="title" style="font-size: 18px; margin-bottom: 20px">
        未分类作品
        <a-button style="margin-left: 20px" @click="activeChoose" type="primary"
          >选择</a-button
        >
        <a-button @click="showDelete" v-if="deleteTextVisible" type="danger"
          >删除</a-button
        >
        <a-button @click="addSample" v-if="addSampleVisible" type="default"
          >加入作品集</a-button
        >
        <a-dropdown v-if="addSampleVisible">
          <a-menu slot="overlay">
            <a-menu-item
              @click="chooseSample(index)"
              v-for="(item, index) in sampleList"
              :key="index"
              >{{ item.title }}</a-menu-item
            >
          </a-menu>
          <a-button style="margin-left: 8px">
            {{ optionActive.title }} <a-icon type="down" />
          </a-button>
        </a-dropdown>
        <a-button v-if="deleteTextVisible" @click="chooseAll" type="link"
          >全选</a-button
        >
        <a-button v-if="deleteTextVisible" @click="cancelAll" type="link"
          >取消全选</a-button
        >
      </div>
      <div class="sample-box">
        <a-upload
          name="file"
          list-type="picture-card"
          class="img-box"
          :show-upload-list="false"
          action="http://localhost:3000/api/upload"
          :before-upload="beforeUpload"
          @change="handleChange"
          style="border: 0px !important"
          :multiple="true"
        >
          <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
          <div v-else>
            <a-icon :type="loading ? 'loading' : 'plus'" />
            <div class="ant-upload-text">Upload</div>
          </div>
        </a-upload>
        <div
          @click="chooseIcon(index)"
          v-for="(item, index) in imageList"
          :key="index"
          class="img-box"
        >
          <a-icon
            v-if="chooseIconVisible"
            theme="twoTone"
            class="deleteIcon"
            :twoToneColor="item.isChoose == true ? '#29DE1A' : '#1374FF'"
            :type="item.isChoose == true ? 'check-circle' : 'plus-circle'"
          />
          <img :src="item.url" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getAuthorinfo,
  getForm,
  deleteArray,
  updateImageInfo,
} from "../../../API/index";
export default {
  props: {
    authorInfo: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      imageSum: 0,
      sampleSum: 0,
      imageList: [],
      sampleList: [],
      chooseIconVisible: false,
      deleteTextVisible: false,
      addSampleVisible: false,
      chooseList: [],
      optionActive: {},
      sampleActive: [],
      changeTextVisible: false,
      oldName:''
    };
  },
  watch: {
    authorInfo() {
      this.getAuthorinfo();
      this.getAuthorImage();
      this.getAuthorSample();
    },
  },
  mounted() {
    this.getAuthorinfo();
    this.getAuthorImage();
    this.getAuthorSample();
  },
  methods: {
    getAuthorinfo() {
      let data = {
        author_id: this.authorInfo.id,
      };
      getAuthorinfo(data).then((res) => {
        console.log(res);
        this.imageSum = res.data.imageSum;
        this.sampleSum = res.data.sampleSum;
      });
    },
    getAuthorImage() {
      let data = {
        form: "image",
        operation: "search",
        data: {
          author_id: this.authorInfo.id,
          sample_id: 0,
        },
        size: -1,
      };
      getForm(data).then((res) => {
        console.log(res);
        this.imageList = res.data.list;
        this.imageList.forEach((item) => {
          item.push({ isChoose: false });
        });
      });
    },
    getAuthorSample() {
      let data = {
        form: "sample",
        operation: "search",
        data: {
          author_id: this.authorInfo.id,
        },
        size: -1,
      };
      getForm(data).then((res) => {
        this.sampleList = res.data.list;
        this.sampleList.forEach((item) => {
          item.push({ show: false });
        });
      });
    },
    beforeUpload() {
      this.hide = this.$message.loading("正在上传中..", 0);
    },
    handleChange(e) {
      console.log(e);
      let imageUrl = e.file.response.imageUrl;
      this.insertImage(imageUrl, this.authorInfo.id);
    },
    insertImage(url, author_id) {
      let data = {
        form: "image",
        operation: "insert",
        data: {
          url: url,
          author_id: author_id,
        },
      };
      getForm(data).then((res) => {
        this.$message.success("新增成功");
        this.getAuthorImage();
      });
    },
    activeChoose() {
      this.chooseIconVisible = !this.chooseIconVisible;
      this.chooseList = [];
      if (this.chooseIconVisible == true) {
        this.deleteTextVisible = true;
        this.addSampleVisible = true;
      } else {
        this.deleteTextVisible = false;
        this.addSampleVisible = false;
      }
    },
    chooseAll() {
      this.imageList.forEach((item) => {
        item.isChoose = true;
      });
      this.$forceUpdate();
    },
    cancelAll() {
      this.imageList.forEach((item) => {
        item.isChoose = false;
      });
      this.$forceUpdate();
    },
    chooseIcon(index) {
      if (this.chooseIconVisible == false) {
        return;
      }
      this.imageList[index].isChoose = !this.imageList[index].isChoose;
      if (this.imageList[index].isChoose == true) {
        this.chooseList.push(this.imageList[index].id);
      } else if (this.imageList[index].isChoose == false) {
        this.chooseList.splice(index, 1);
      }
      this.$forceUpdate();
    },
    showDelete() {
      let _this = this;
      if (this.chooseList.length == 0) {
        return;
      }
      this.$confirm({
        title: "确定要删除吗？",
        content: "删除后数据不可恢复",
        okText: "确定",
        cancelText: "取消",
        onOk() {
          _this.deleteAll();
        },
        onCancel() {},
      });
    },
    deleteAll() {
      let data = {
        form: "image",
        key: "id",
        data: this.chooseList,
      };
      deleteArray(data).then((res) => {
        console.log(res);
        this.getAuthorImage();
        this.getAuthorinfo();
        this.chooseIconVisible = false;
        this.deleteTextVisible = false;
        this.addSampleVisible = false;
      });
    },
    addSample() {
      let data = {
        data: this.chooseList,
        sample_id: this.optionActive.id,
      };
      updateImageInfo(data).then((res) => {
        this.$message.success("新增成功");
        this.getAuthorSample();
        this.getAuthorinfo();
        this.getAuthorImage();
      });
    },
    chooseSample(index) {
      this.optionActive = this.sampleList[index];
    },
    showSample(index) {
      this.sampleList[index].show = !this.sampleList[index].show;
      if (this.sampleList[index].show == true) {
        this.getSampleActive(this.sampleList[index].id);
      }
      this.$forceUpdate();
    },
    getSampleActive(id) {
      let data = {
        form: "image",
        operation: "search",
        data: {
          sample_id: id,
        },
        size: -1,
      };
      getForm(data).then((res) => {
        this.sampleActive = res.data.list;
      });
    },
    changeAuthorNameText(status) {
      if (status == "change") {
        this.oldName = this.authorInfo.chineseName;
        this.changeTextVisible = true;
      } else if (status == "yes") {
        this.changeAuthor(this.oldName )
        this.changeTextVisible = false;
      } else if (status == "no") {
        this.authorInfo.chineseName = this.oldName
        this.changeTextVisible = false;
      }
    },
    changeAuthor(oldName) {
      let data = {
        form: "author",
        operation: "update",
        data: {
          chineseName: [oldName, this.authorInfo.chineseName],
        },
        
      };
      getForm(data).then(res => {
          console.log(res)
        })
    },
  },
};
</script>

<style scoped>
.author-index {
  width: 100%;
  height: 100%;
  padding: 20px 30px;
  text-align: left;
  overflow: hidden;
}
.first-floor {
  display: flex;
  justify-content: space-between;
}
.son {
  width: 32%;
  height: 116px;
  background-color: #d8d8d844;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0 20px;
  position: relative;
}
.changeText {
  position: absolute;
  top: 10px;
  right: 10px;
  color: #1890ff;
}
.son .title {
  font-size: 19px;
}
.son .value {
  font-size: 34px;
  color: rgb(163, 8, 8);
}
.second-floor {
  width: 100%;
  height: auto;
  background-color: #d8d8d844;
  margin-top: 20px;
  padding: 20px;
}
.img-box {
  width: 100px;
  height: 100px;
  overflow: hidden;
  margin: 15px;
  position: relative;
  padding: 5px;
}
.img-box img {
  height: 100%;
  object-fit: cover;
  width: 100%;
  border-radius: 9px;
}
.sample-box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}
.deleteIcon {
  position: absolute;
  top: 0px;
  right: 0px;
  color: rgb(0, 38, 255);
  font-size: 20px;
  z-index: 1000;
  overflow: visible;
}
.sample-more {
  background: #fff;
  padding: 20px;
}
.sample-more-img-box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}
</style>